<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">通知提醒(共{{total}}条)</block>
		</cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
		<view v-for="(item,index) in dataList" :key="index">
			<view class="cu-item bg-white solid-bottom">
				<view class="flex align-start padding" style="flex-direction: column;">
					<view class="flex justify-start align-center padding-bottom-sm solid-bottom" style="width: 100%;">
						<view :class="'cu-tag text-white '+['bg-'+item.level_color]">{{item.level_name}}</view>
						<text :class="'padding-left-sm text-lg text-bold '+['text-'+(item.is_read==1?'gray':'black')]">{{item.title}}</text>
					</view>
					<view @tap="jumpToDetail(item)" class="flex align-center justify-between padding-top-sm" style="width: 100%;">
						<view class="flex justify-start align-center" style="flex-direction: column;">
							<text :class="'text-df '+['text-'+(item.is_read==1?'gray':'black')]">{{item.content}}</text>
							<view class="flex justify-start align-center padding-top-sm" style="width: 100%;">
								<text class="text-gray text-sm">{{item.created_at}}</text>
							</view>
						</view>
						<text class="cuIcon-right text-grey"></text>
					</view>
				</view>
			</view>
		</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import { notificationList,notificationMarkRead } from '@/api/api.js'
	import Footer from '@/components/Footer.vue';
	import config from '@/api/config.js'
	export default {
		components: {
			Footer
		},
		mixins: [MescrollMixin],
		data() {
			return {
				total:0,
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore:config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		methods: {
			jumpToDetail(notification) 
			{
				if(notification.key_info !== null && notification.key_info !== undefined && notification.key_info.length > 0) 
				{
					let keyInfo = JSON.parse(notification.key_info)
					if(keyInfo.hasOwnProperty('post_id')) {
						uni.navigateTo({
							url:'/pages/detail/detail?postId='+keyInfo['post_id']
						})
						return
					}
					if(keyInfo.hasOwnProperty('comment_id')) {
						uni.navigateTo({
							url:'/pages/always/comment-detail/comment-detail?needPostInfo=1&commentId='+keyInfo['comment_id']
						})
						return
					}
					if(keyInfo.hasOwnProperty('order_no')) {
						let tab = 1
						if(keyInfo.hasOwnProperty('tab')) {
							tab = keyInfo['tab']
						}
						uni.navigateTo({
							url:'/pages/always/order-list/order-list?tab='+tab
						})
						return
					}
				}
			},
			downCallback() {
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				let pageSize = page.size
				this.getMessageListNow(pageIndex, pageSize)
			},
			getTagColorWithLevel(level) 
			{
				let color = 'blue';
				switch (level){
					case 0:
					    color = 'blue';
						break;
					case 1:
						color = 'yellow';
						break;
					case 2:
					     color = 'red';
						 break;
					case 3:
						 color = 'black';
						 break;
					default:
						break;
				}
				return color;
			},
			getTagNameWithLevel(level)
			{
				let name = '通知';
				switch (level){
					case 0:
					    name = '通知';
						break;
					case 1:
						name = '提醒';
						break;
					case 2:
					     name = '警告';
						 break;
					case 3:
						 name = '监管';
						 break;
					default:
						break;
				}
				return name;
			},
			markTheMessageRead(messageIds) 
			{
				if(messageIds === null || messageIds === undefined) {
					return
				} 
				if(messageIds.length == 0) {
					return
				}
				notificationMarkRead(messageIds).then(res=>{
					console.log('mark message read success:'+JSON.stringify(messageIds))
				})
			},
			getMessageListNow(pageIndex,pageSize) {
				notificationList(pageIndex, pageSize).then(res => {
					let pageList = res.data.list 
					this.total = res.data.total
					console.log(pageList)
					let modifyPageList = []
					pageList.forEach(item => {
						let color = this.getTagColorWithLevel(item.level)
						item['level_color'] = color
						let name = item.level_label
						if(item.level_label == null || item.level_label == '') {
							name = this.getTagNameWithLevel(item.level)
						}
						item['level_name'] = name
						modifyPageList.push(item)
					})
					if (pageIndex == 0) {
						this.dataList = modifyPageList
					}else{
					 	this.dataList = this.dataList.concat(modifyPageList);
					}
					let hasNext = pageList.length >= pageSize
					if (this.mescroll) {
						this.mescroll.endSuccess(pageList.length, hasNext);
					}
					//消息设置已读
					this.markTheMessageRead(res.data.unread_id_list)
				}).catch(error => {
					if (this.mescroll) {
						this.mescroll.endErr()
					}
				})
			}
		},
	}
</script>

<style scoped>

</style>